<template>
    <div class="content">
        <div class="table">
            <el-table border :data="tableData" empty-text="No more information" stripe style="width: 100%">
                <el-table-column label="No." prop="id" width="50">
                </el-table-column>
                <el-table-column prop="projectName" label="Project Name">
                </el-table-column>
                <el-table-column prop="set" label="Settings">
                    <template slot-scope="scope">
                        <Dialog :dialogVisible="dialogVisible" :handleCloseDialog="handleCloseDialog"
                            :newSetting="itemSet" />
                        <span class="bjc_btn" style="margin-left: 10px"
                            @click="handleDialog(scope.row.newSetting)">Details</span>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="The Number of Files">
                </el-table-column>

                <el-table-column prop="startTime" label="Start Time">
                </el-table-column>
                <el-table-column prop="finishTime" label="Finish Time">
                </el-table-column>
                <el-table-column prop="state" label="State">
                </el-table-column>
                <el-table-column label="Operation">
                    <template slot-scope="scope">
                        <span class="bjc_btn" @click="handleDown(scope.row.set)">{{ scope.row.state === 'Success!' ?
                            'Download' : null }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="btn">
            <el-button @click="handleCurPage" :disabled="curPage == 0">
                Previous Page
            </el-button>
            <el-button @click="handleNextPage" :disabled="showDisabled">
                Next Page
            </el-button>
        </div>
    </div>
</template>

<script>
import { test_user_center } from "@/api/tools.js";
import Dialog from "@/components/Dialog.vue"
import moment from 'moment';
export default {
    components: {
        Dialog
    },
    data() {
        return {
            tableData: [],
            totalTableList: [], // 一共有多少条数据
            curPage: 1, // 当前页数
            listLength: 0,  // 一共有多少页
            showDisabled: false, // 是否显示下一页
            dialogVisible: false, // 弹出框隐藏
            itemSet: {}, // 当前弹出框的配置项
        }
    },
    computed: {
        listenTableList() {
            // console.log('table 数据 -', this.$store.state.tableList)
            let newTableList = this.$store.state.tableList.map((item) => {
                const { download_link, setting, task_info } = item || {};
                const { batch_name, file_number, finish_time, start_time, state, batch_id
                } = task_info || {}

                return ({
                    projectName: batch_name,
                    set: download_link,
                    number: file_number,
                    startTime: start_time,
                    finishTime: finish_time,
                    state: state,
                    id: batch_id,
                    newSetting: setting,
                })
            })
            return newTableList;
        }
    },
    watch: {
        listenTableList: {
            handler(cur, old) {
                let newData = cur.map(item => {
                    const { startTime, finishTime } = item || {}

                    return ({
                        ...item,
                        startTime: startTime ? moment(item.startTime).utcOffset(0).format('yyyy-MM-DD HH:mm:ss') : '',
                        finishTime: finishTime ? moment(item.finishTime).utcOffset(0).format('yyyy-MM-DD HH:mm:ss') : '',
                    })
                })

                this.tableData = newData.slice(0, 5)
                this.totalTableList = newData
                this.listLength = newData.length

                // console.log('a', newData)
                // console.log('b', newData.slice(0, 5))
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        test_user_center({
            email: JSON.parse(localStorage.getItem('login'))?.email
        }).then(res => {
            const { code, data } = res || {}
            const { account_info, batch_info } = data || {}
            if (code == 200) {
                this.$store.commit('handleSaveUserInfo', account_info)
                this.$store.commit('handleTableList', batch_info)
            }
        }).catch(err => console.log('err', err))
    },
    methods: {
        // 点击 切换到下一页
        handleNextPage() {
            let totalPage = Math.ceil(this.listLength / 5)
            if (this.curPage < totalPage) {
                ++this.curPage;
                this.tableData = this.totalTableList.slice(this.curPage * 5, (this.curPage * 5) + 5)
            } else {
                // console.log('结束了')
                this.showDisabled = true
            }
        },
        // 切换到上一页
        handleCurPage() {

            console.log('11', this.curPage)
            if (this.curPage > 0) {
                --this.curPage,
                    this.tableData = this.totalTableList.slice(this.curPage * 5, (this.curPage * 5) + 5)
            }
        },
        // 下载包
        handleDown(link) {
            // console.log('link', link)
            window.open(link)
        },

        // 打开弹出框
        handleDialog(params) {
            // console.log('params', params)
            const {
                accent,
                speaker,
                dictionary, // 这个 返回的是一个数字
                format_phoneme,
                format_pinyin,
                format_character,

                phoneme,
                pinyin,
                character,
                word,
                sentence,
            } = params || {}

            let obj = {
                accent,
                speaker,
                custom: dictionary,
                checkList: [],
                phoneme: format_phoneme,
                pinyin: format_pinyin,
                character: format_character
            }

            phoneme && obj.checkList.push('Phoneme')
            pinyin && obj.checkList.push('Pinyin')
            character && obj.checkList.push('Character')
            word && obj.checkList.push('Word')
            sentence && obj.checkList.push('Sentence')

            this.itemSet = obj;

            this.dialogVisible = true
        },
        // 关闭弹出框
        handleCloseDialog() {
            this.dialogVisible = false;
            this.itemSet = {}
        }
    }

}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    flex-direction: column;

    .table {}

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            width: 150px;
            background-color: #b8add1;
            color: #fff;
            margin-top: 30px;
        }
    }

    .bjc_btn {
        cursor: pointer;
        text-decoration: underline;
    }
}
</style>
